<template>
  <div ref="fullScreen"
       :class="[isFullScreen?'full-screen':'','aui-card--fill','zoom-box','traffic-detection']">
    <div class="box">
      <div class="content">
        <span class="nav">
          <div style="width: 260px"></div>
          <div style="width: 260px"
               class="time">{{timeInfo.time}}</div>
          <div style="width: 260px"
               class="data"><span style="padding-right: 30px">{{timeInfo.week}}</span><span>{{timeInfo.data}}</span></div>
        </span>
        <div class="no"
             id="no"
             @click="fullScreenFn"></div>
        <el-carousel :autoplay="autoplay"
                     :interval="interval"
                     :initial-index="initialIndex"
                     indicator-position="none"
                     arrow="never"
                     :loop="true"
                     :height="height + 'px'"
                     ref="carousel"
                     @change="onChange">
          <el-carousel-item v-for="(item, index) in imgList"
                            :key="index"
                            name="index">
            <el-image v-if="item.type === 1"
                      :src="item.url"
                      style="width: 100%;height: 100%" />
            <video-player class="video-player vjs-custom-skin"
                          v-if="item.type === 0"
                          ref="videoPlayer"
                          :playsinline="false"
                          :options="playerOptions"
                          @ended="onPlayerEnded($event)"
                          @loadeddata="onPlayerLoadeddata($event)"></video-player>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div v-if="type === 1"
           style="height: 2px;background-color: #b0dafe;"></div>
      <div class="tianqi"
           v-if="type === 1"
           :style="{height : this.allHeight + 'px'}">
        <div class="tianqi-left">
          <div class="region1">
            <div class="region1box">
              <el-image class="tianqiimg"
                        fit="cover"
                        :src="dataInfo.weather.url"></el-image>
              <span class="text">凯金智慧园区</span>
            </div>
          </div>
          <div class="region2">
            <div class="region2box">
              <div class="wendu">
                <span class="nowwendu">{{dataInfo.weather.wendu}}</span>
                <div style="transform: translateY(-8px);display: inline-block;">°</div>
              </div>
            </div>
            <div class="wenduinfo">
              <div style="position: relative;
            top: 50%;
            transform: translateY(-50%);">
                <span>{{dataInfo.weather.type}}<span style="padding-left: 20px">{{dataInfo.weather.tips}}</span></span><br />
                <span class="min-max">{{dataInfo.weather.min}}~{{dataInfo.weather.max}}℃</span>
              </div>
            </div>
          </div>
        </div>
        <div class="tianqi-right">
          <div class="region3">
            <div class="item">
              <div class="itembox">
                <div class="img">
                  <el-image style="width: 100%; height: 100%"
                            :src="require('@/assets/img/shidu-icon.png')"></el-image>
                </div>
                <div class="text">{{`湿度 (%)`}}</div>
                <div class="line"></div>
                <div class="index">{{dataInfo.weather.humidity}}</div>
              </div>
            </div>
            <div class="item">
              <div class="itembox">
                <div class="img">
                  <el-image style="width: 100%; height: 100%"
                            :src="require('@/assets/img/tigan.png')"></el-image>
                </div>
                <div class="text">{{`体感温度`}}</div>
                <div class="line"></div>
                <div class="index"
                     style="transform: translateX(10px)">{{dataInfo.weather.tigan}} <div style="transform: translateY(-6px);display: inline-block;">°</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="itembox">
                <div class="img">
                  <el-image style="width: 100%; height: 100%"
                            :src="require('@/assets/img/kongqi-icon.png')"></el-image>
                </div>
                <div class="text">{{`空气质量`}}</div>
                <div class="line"></div>
                <div class="index">{{dataInfo.weather.kongqi}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footercontent">
        <div class="my-outbox">
          <div class="my-inbox"
               ref='box'>
            <div class="my-list"
                 v-for="(item,index) in sendVal"
                 :key='index'
                 ref='list'>
              <!--{{item.name}}刚刚购买了产品-->
              <span>{{item}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <video :src="tempSrc"
           id="myVideo"
           v-show="false"></video>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { dateFormat } from '@/utils'
import fullScreen from '@/mixins/full-screen'
import screenfull from 'screenfull'
export default {
  components: { },
  props: {
    dataInfo: Object,
    type: Number // 1:横屏1 2:横屏2
  },
  mixins: [fullScreen, mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '', // 数据列表接口，API地址
        getTimeIntervalURL: '', // 获取时间间隔
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '', // 添加，API地址
        advertisementTypePageURL: '',
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      timeInfo: {
        data: '',
        time: '',
        week: ''
      },
      allHeight: null,
      sendVal: [],
      nowTime: null,
      // 每一个内容的宽度
      disArr: [],
      height: 800,
      tempSrc: null,
      fullscreen: false,
      imgList: [],
      duration: null,
      autoplay: true,
      interval: 3000,
      initialIndex: 0, // 轮播默认滑动到第一个
      // 视频参数
      playerOptions: {
        autoplay: true, // 如果true,浏览器准备好时开始回放。实现自动播放，autoplay、muted都设置为true
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        controls: false, // 隐藏操作条
        aspectRatio: '1920:800',
        // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: '' // url地址
          }
        ],
        width: document.documentElement.clientWidth, // 播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      }
    }
  },
  watch: {
    height: {
      handler: function (val) {
        if (this.type === 1) {
          this.height = document.body.clientHeight * 0.74
          this.allHeight = document.body.clientHeight - this.height - 50
          if (this.allHeight < 230) {
            this.allHeight = this.allHeight + 6
          }
        } else {
          this.height = document.body.clientHeight - 48
        }
      },
      immediate: true,
      deep: true
    },
    initialIndex: {
      handler: function (val) {
        if (this.imgList[val].type === 0) {
          this.playerOptions.sources[0].src = this.imgList[val].url
        }
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    removenowTime () {
      clearInterval(this.nowTime)
    },
    init () {
      this.getCurrentTime()
      setTimeout(() => {
        if (this.type === 1) {
          this.playerOptions.aspectRatio = '1920:800'
          this.height = document.body.clientHeight * 0.74
          this.allHeight = document.body.clientHeight - this.height - 50 < 230 ? document.body.clientHeight - this.height - 50 + 6 : document.body.clientHeight - this.height - 50
          window.onresize = () => {
            return (() => {
              this.allHeight = document.body.clientHeight - this.height - 50 < 230 ? document.body.clientHeight - this.height - 50 + 6 : document.body.clientHeight - this.height - 50
              this.height = document.body.clientHeight * 0.74
            })()
          }
        } else {
          this.height = document.body.clientHeight - 48
          this.playerOptions.aspectRatio = '1920:1032'
          window.onresize = () => {
            return (() => {
              this.height = document.body.clientHeight - 48
            })()
          }
        }
        this.sendVal = []
        this.imgList = []
        this.dataInfo.list.forEach(item => {
          if (item.type === 1) {
            let arr = []
            arr = item.fileAddr.split(',')
            for (let i = 0; i < arr.length; i++) {
              let obj1 = {}
              obj1.type = item.type
              obj1.url = arr[i]
              obj1.interval = item.showTime * 1000
              this.imgList.push(obj1)
            }
          }
          if (item.type === 0) {
            let obj = {}
            obj.type = item.type
            obj.url = item.fileAddr
            obj.interval = this.getvideoTime(item.fileAddr) * 1000
            this.imgList.push(obj)
          }
          if (item.type === 2) {
            this.sendVal.push(item.content)
          }
        })
        this.sendVal = this.sendVal.length > 0 ? this.sendVal : ['不忘初心,方得始终', '不忘初心,方得始终', '不忘初心,方得始终', '不忘初心,方得始终', '不忘初心,方得始终', '不忘初心,方得始终']
        // 初始化播放
        if (this.imgList.length > 0 && this.imgList[0].type === 0) {
          this.playerOptions.sources[0].src = this.imgList[0].url
          this.onChange(0)
        } else if (this.imgList.length > 0 && this.imgList[0].type === 1) {
          this.interval = this.imgList[0].interval
        }
        setTimeout(() => {
          let item = this.$refs.list
          let len = this.sendVal.length
          let arr = []
          // 因为设置的margin值一样，所以取第一个就行。
          let margin = this.getMargin(item[0])
          for (let i = 0; i < len; i++) {
            arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
          }
          this.disArr = arr
          this.moveLeft()
        }, 100)
      }, 200)
    },
    getMargin (obj) {
      let marg = window.getComputedStyle(obj, null)['margin-right']
      marg = marg.replace('px', '')
      return Number(marg) // 强制转化成数字
    },
    moveLeft () {
      let that = this
      let outbox = this.$refs.box
      // 初始位置
      let startDis = 0
      this.nowTime = setInterval(function () {
        startDis -= 0.5
        if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
          // 每次移动完一个元素的距离，就把这个元素的宽度
          that.disArr.push(that.disArr.shift())
          // 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项
          that.sendVal.push(that.sendVal.shift())
          startDis = 0
        }
        // 每次都让盒子移动指定的距离，在我自己做的项目中，这种字符串拼接的方法并没有生效
        // outbox.style = 'transform: translateX3d(' + startDis + 'px)'
        // 后面换了es6的模板字符串就可以了
        outbox.style = `transform: translateX(${startDis}px)`
        // outbox.style = 'transform: translateX(\' + startDis + \' px)'
        // outbox.style.marginLeft = 'startDis'
      }, 1000 / 60)
    },
    getCurrentTime () {
      let date = new Date()
      this.timeInfo.data = dateFormat('YYYY/mm/dd', date)
      this.timeInfo.time = dateFormat('HH:MM', date)
      const weekArr = ['日', '一', '二', '三', '四', '五', '六']
      this.timeInfo.week = '星期' + weekArr[date.getDay()]
      requestAnimationFrame(this.getCurrentTime)
    },
    getvideoTime (url) {
      this.tempSrc = url
      let myVideo = document.getElementById('myVideo')
      let time = ''
      myVideo.oncanplay = function () {
        time = myVideo.duration
      }
      return time
    },
    onPlayerLoadeddata (player) {
      // 获取资源总时长
      this.duration = player.cache_.duration
    },
    // 监听媒体是否已到达结尾，播放完
    onPlayerEnded (player) {
      this.autoplay = true
      this.interval = 1
    },
    // 监听轮播图改变
    onChange (index) {
      this.interval = this.imgList[index].interval
      // 如果是视频,就等播放完再进行下一个
      if (this.imgList[index].type === 0) { // 视频
        setTimeout(() => {
          this.playerOptions.sources[0].src = this.imgList[index].url
          this.$refs.videoPlayer[0].player.src(this.imgList[index].url) // 重置进度条,再次轮播时让视频重新播放
          if (this.imgList.length === 1) {
            this.playerOptions.loop = true
            this.autoplay = true
          } else {
            this.autoplay = false
          }
        }, 1)
      }
    },
    fullScreenFn () {
      // const element = document.documentElement
      // if (element.webkitRequestFullscreen) {
      //   element.webkitRequestFullscreen()
      // } else if (element.requestFullscreen) {
      //   element.requestFullscreen()
      // } else if (element.mozRequestFullScreen) {
      //   element.mozRequestFullScreen()
      // } else if (element.msRequestFullscreen) {
      //   element.msRequestFullscreen()
      // }
      if (screenfull.isEnabled) {
        if (screenfull.isFullscreen) {
          screenfull.exit()
        } else {
          screenfull.request()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
html {
  ::-webkit-scrollbar {
    width: 0 !important;
  }
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.zoom-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .box {
    display: flex;
    flex-direction: column;
    height: 100%;
    .content {
      width: 100%;
      height: 74%;
      .no {
        height: 100%;
        width: 100%;
        background-color: transparent;
        position: absolute;
        z-index: 1001;
      }
      .nav {
        width: 100%;
        height: 48px;
        line-height: 48px;
        background-color: rgba($color: #fff, $alpha: 0.5);
        font-size: 24px;
        color: #212121;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: absolute;
        z-index: 1000;
        .time {
          text-align: center;
        }
        .data {
          text-align: right;
          padding-right: 30px;
        }
      }
    }
    .tianqi {
      // height: 230px;
      // flex: 1;
      width: 100%;
      // height: 23%;
      background-color: #fff;
      background-image: url("~@/assets/img/tianqi-bg.png");
      background-repeat: repeat-y;
      // background-size: cover;
      display: flex;
      flex-flow: column;
      height: 100%;
      flex-direction: row;
      justify-content: space-between;
      .tianqi-left {
        width: 60%;
        display: flex;
        flex-direction: row;
        .region1 {
          margin-left: 12%;
          // margin-top: 3.5%;
          justify-items: center;
          max-width: 186px;
          height: 100%;
          display: flex;
          flex-direction: column;
          .region1box {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            .tianqiimg {
              // width: 100%;
              // min-width: 130px;
              min-height: 100px;
              // max-width: 186px;
              max-height: 151px;
            }
            .text {
              display: inline-block;
              margin-top: 14px;
              font-weight: 530;
              font-size: 24px;
              color: #323232;
            }
          }
        }
        .region2 {
          display: flex;
          flex-direction: row;
          .region2box {
            .wendu {
              position: relative;
              top: 50%;
              transform: translateY(-50%);
              font-size: 98px;
              font-weight: 540;
              letter-spacing: 2px;
              margin-left: 20%;
              min-width: 200px;
              // margin-top: 15%;
              .nowwendu {
              }
            }
          }
          .wenduinfo {
            margin-left: 30px;
            font-size: 24px;
            min-width: 220px;
            .min-max {
              display: inline-block;
              font-size: 40px;
              letter-spacing: 4px;
              padding-top: 8px;
            }
          }
        }
      }
      .tianqi-right {
        width: 40%;
        .region3 {
          height: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          .item {
            height: 100%;
            display: flex;
            flex-direction: column;
            text-align: center;
            .itembox {
              position: relative;
              top: 50%;
              transform: translateY(-50%);
              .img {
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 80px;
                // margin-top: 20px;
              }
              .text {
                margin-top: 18px;
                font-size: 24px;
              }
              .line {
                position: relative;
                top: 18px;
                left: 50%;
                transform: translateX(-50%);
                height: 2px;
                width: 40px;
                background-color: #cbcbcb;
              }
              .index {
                padding-top: 30px;
                font-size: 36px;
                color: #323232;
              }
            }
          }
        }
      }
    }
    .footercontent {
      width: 100%;
      height: 48px;
      background-color: #ebebeb;
      color: #777777;
      overflow: hidden;
      font-size: 18px;
      // position: fixed;
      position: absolute;
      bottom: 0px;
      .my-outbox {
        width: 95%;
        margin: 0 auto;
        overflow: hidden;
        .my-inbox {
          white-space: nowrap;
          .my-list {
            margin-right: 100px;
            display: inline-block;
            // height: 20px;
            text-indent: 30px;
            line-height: 48px;
          }
        }
      }
    }
  }
}
@media (max-width: 1500px) {
  .region1 {
    max-width: 130px !important;
    .tianqiimg {
      max-height: 120px !important;
    }
    .text {
      font-size: 20px !important;
    }
  }
  .region2 {
    .wendu {
      font-size: 90px !important;
      min-width: 170px !important;
    }
    .wenduinfo {
      margin-left: 15px !important;
      font-size: 22px !important;
      .min-max {
        font-size: 34px !important;
      }
    }
  }
  .region3 {
    .img {
      width: 60px !important;
      height: 60px !important;
    }
    .text {
      font-size: 20px !important;
    }
    .index {
      font-size: 32px !important;
    }
  }
}
</style>
